<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link href="../plugin/layer/laydate/need/laydate.css" rel="stylesheet">
		<link href="../plugin/layer/laydate/skins/default/laydate.css" rel="stylesheet">
		<style>
			.n-default .n-left,
			.n-default .n-right {
				margin-top: 32px!important;
			}
		</style>
	</head>

	<body>
		<div id="header"></div>
		<!--<div id="headerBox"></div>-->
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">用户中心</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="user_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-user-head clearfix"><span class="left fl">我的订单</span><span class="right fr">当前位置：我的订单--消费订单</span></div>
					<div class="search-wrap">
						<div class="tab-menu">
							<a href="13.html" >线上商城订单</a>
							<span>|</span>
							<a href="" class="current">线下商家订单</a>
						</div>
						<form class="search-form" name="form">
							<label>
					            订单编号：<input class="u-query" id="orderNo" name="orderNo" type="text">
					        </label>
							<label>
					            &nbsp;&nbsp;订单状态：
					            <select id="sOrderStatus" name="sOrderStatus" class="u-query">
					                <option value="">选择订单状态</option>
					                <option value="1">用户下单</option>
					                <option value="2">商家取消</option>
					                <option value="3">已完成</option>
					            </select>
					        </label>
							<label>
					            &nbsp;&nbsp;时间：<input class="laydate-icon u-query" type="text" name="beginTime" id="beginTime" placeholder="开始时间">
					            - <input class="laydate-icon u-query" type="text" name="endTime" id="endTime" placeholder="结束时间">
					        </label>
							<a href="javascript:;" class="btn-inquire" onclick="orderListByPage();"><i class="icon-search"></i></a>
						</form>
					</div>
					<div class="ZZHT-user-content">
						<table class="ZZHT-order-list">
							<thead>
								<tr class="head">
									<th width="45">编号</th>
									<th width="150">订单号</th>
									<th width="150">下单时间</th>
									<th width="100">付款金额（¥）</th>
									<th width="100">奖励积分</th>
									<th width="80">订单状态</th>
									<!--<th>备注</th>
									<th>操作</th>-->
								</tr>
							</thead>
							<!-- 加载中提示 -->
							<tbody id="loadingBdy">
								<tr id="loading" class="empty-row" style="display: none;">
									<td colspan="10"><img src="../plugin/userLib/img/loading.gif">正在加载数据...</td>
								</tr>
							</tbody>
							<tbody class="j-order-row">
								<tr class="order-head" v-for="v in tab">
									<td> {{v.orderId}} </td>
									<td>
										<a class="ZZHT-fblue">{{v.orderNO}}</a>
									</td>
									<td> {{v.createTime}} </td>
									<td> {{v.totalMoney}} </td>
									<td> {{v.score}} </td>
									<td> {{v.orderStatus}} </td>
									<!--<td> {{v.orderRemarks}}</td>
									<td>
										<a href="">查看详情</a>
									</td>-->
								</tr>
							</tbody>
							<tbody class="j-order-row empty_tab">
								<tr>
									<td colspan='8' align="center" style='padding:5px 0px 5px 0px'>暂无数据</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div id="pager" style="text-align: center;"></div>
				</div>
			</div>
			<div style="clear:both;"></div>
			<br>
		</div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../plugin/layer/laydate/laydate.js"></script>
		<script src="../plugin/layer/layer.js"></script>
		<script src="../js/common.js"></script>
		<!--<script src="../plugin/userLib/js/log.js"></script>-->
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script>
			var search_data = {}; //查询条件
			var pages = 1; //总页数
			var pageNum = 1; //当前页

			initDate();

			$(function() {
				getList();
				initPage();
			});

			$('.empty_tab').hide();

			var vm = new Vue({
				el: '.ZZHT-order-list',
				data: {
					tab: [],
				}
			});

			function getList() {
				$('#loading').show();
				var data = $.extend(true,{},search_data);
				
				data.userId = localStorage.userId;
				
				data.pageNum = pageNum;
				
				$.ajax({ //获取记录列表
					type: "get",
					url: SURL + "sktOrdersStores/selectUserOrdersStores",
					async:false,
					data: data,
					timeout: 5000,
					dataType: 'json',
					success: function(res) {
						$('#loading').hide();
						pages = res.page;
						if(res.messageCode == 200) {
							if(res.entity.length > 0) {
								$('.empty_tab').hide();
							} else {
								$('.empty_tab').show();
							}
							vm.tab = res.entity;
						} else {
							layer.msg(res.message);
						}
					},
					error: function(textStatus) {
						console.error(textStatus);
					},
					complete: function(XMLHttpRequest, status) {
						if(status == 'timeout') {
							layer.msg("网络超时，请刷新", function() {
								location.reload();
							})
						}
					}
				});
			}
		</script>
	</body>

</html>